<template>
	<view>
		<view class="acea-row row-middle row-between nav-bg">
			<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
				<view class="item" :class="index===categoryOn?'item-on':''" v-for="(item,index) in categoryList"
					:key="index" @click="categoryNavClick(item,index)">
					<view class="acea-row row-middle row-center img">
						<image :src="item.icon" mode=""></image>
					</view>
					<view class="name">
						{{item.name}}
					</view>
				</view>
			</scroll-view>
		</view>

		<view class="acea-row row-middle type-bg">
			<view class="type" :class="typeOn==index?'type-on':''" v-for="(item,index) in types" :key="index"
				@click="typeNavClick(item,index)">
				{{item.name}}
			</view>
		</view>
		<brand-entry :brandType="categoryList[categoryOn] ? categoryList[categoryOn].children : []" v-if="typeOn==0"
			:brandId="brandId"></brand-entry>
		<apply-join v-if="typeOn==1"
			:brandType="categoryList[categoryOn] ? categoryList[categoryOn].children : []"></apply-join>
		<view class="uni-p-b-98"></view>
	</view>
</template>

<script>
	import brandEntry from '../components/brandEntry.vue'
	import applyJoin from '../components/brandApplyJoin.vue'
	import {
		getclassificationListApi
	} from '@/api/brand/index.js'
	export default {
		components: {
			brandEntry,
			applyJoin
		},
		data() {
			return {
				isWidth: 40,
				isLeft: 0,
				tabLeft: 0,
				types: [{
					name: '品牌入驻'
				}, {
					name: '申请加盟'
				}],
				typeOn: 1,
				categoryList: [],
				categoryOn: 0,
				brandId: null
			};
		},
		onLoad(options) {
			// let title = '发布-'+this.categoryList[this.categoryOn].name+this.types[this.typeOn].name
			this.typeOn = options.typeOn || 0;
			let title = '发布-' + this.types[this.typeOn].name
			uni.setNavigationBarTitle({
				title: title
			});
			if (!options.id) return
			this.brandId = Number(options.id)
		},
		mounted() {
			this.getTypeList()
		},
		methods: {

			//获取品牌类别列表
			async getTypeList() {
				try {
					let {
						data
					} = await getclassificationListApi();
					this.categoryList = data;
				} catch (e) {
					//TODO handle the exception
				}
			},
			typeNavClick(item, index) {
				// let title = '发布-'+this.categoryList[this.categoryOn].name+item.name
				let title = '发布-' + item.name
				uni.setNavigationBarTitle({
					title: title
				})
				this.typeOn = index
			},
			// 导航栏点击
			categoryNavClick(item, index) {
				if (this.categoryList.length > 6) {
					var tempIndex = index - 2;
					tempIndex = tempIndex <= 0 ? 0 : tempIndex;
					this.tabLeft = (index - 2) * this.isWidth //设置下划线位置
				}
				this.categoryOn = index //设置导航点击了哪一个
				this.isLeft = index * this.isWidth //设置下划线位置
			},
		}
	}
</script>

<style lang="scss">
	.nav-bg {
		background: #ffffff;
		padding: 18rpx 30rpx 36rpx;
		.scroll-view_H {
			white-space: nowrap;
			width: 100%;
			.item {
				display: inline-block;
				white-space: nowrap;
				margin: 0 20rpx;
				.img {
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
					background: #ffffff;
					margin: 0 auto;

					image {
						width: 60rpx;
						height: 65rpx;
					}
				}

				.name {
					// width: 70rpx;
					font-size: 26rpx;
					font-weight: 400;
					line-height: 40rpx;
					color: rgba(0, 0, 0, 1);
					text-align: center;
				}
			}

			.item-on {
				.img {
					background: rgba(247, 247, 247, 1);
				}

				.name {
					color: rgba(239, 39, 50, 1);
				}
			}

		}

		.item~.item {
			// margin-left: 48rpx;
		}

	}

	.type-bg {
		padding: 24rpx 30rpx;
		background: rgba(247, 248, 250, 1);

		.type~.type {
			margin-left: 18rpx;
		}

		.type {
			padding: 6rpx 24rpx;
			border-radius: 10rpx;
			border: 1px solid rgba(229, 229, 229, 1);
			font-size: 32rpx;
			font-weight: 400;
			color: rgba(128, 128, 128, 1);
		}

		.type-on {
			border: 1px solid rgba(238, 33, 45, 1);
			background: rgba(238, 33, 45, 1);
			color: #ffffff;

		}
	}
</style>